<script setup lang="ts">
import { ref } from 'vue';
import dayjs, { Dayjs } from 'dayjs';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';

const bodyStyle = {
  padding: '2rem 7% 0'
}
let upInfoSwitch = ref<boolean>(true)
const okUpInfo = () => {
  upInfoSwitch.value = false
}
const clearUpInfo = () => {
  upInfoSwitch.value = true
}
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}

const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj, (base64Url: string) => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
}

const beforeUpload = (file: UploadProps['fileList'][number]) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}
// 性别选择
const valueSelect = ref<string>('man')
// 日期选择器
const dateFormat = 'YYYY-MM-DD';
const value1 = ref<Dayjs>(dayjs('2015-01-01', dateFormat));
</script>

<template>
  <a-card :bordered="false" :body-style="bodyStyle" style="height: 100%">
   <a-flex>
     <a-card style="width: 100%">
       <a-row :gutter="16">
         <a-col :span="4">
           <a-upload
               v-model:file-list="fileList"
               name="avatar"
               list-type="picture-card"
               class="avatar-uploader"
               :show-upload-list="false"
               action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
               :before-upload="beforeUpload"
               @change="handleChange"
               :disabled="upInfoSwitch"
           >
             <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
             <div v-else>
               <loading-outlined v-if="loading"></loading-outlined>
               <plus-outlined v-else></plus-outlined>
               <div class="ant-upload-text">Upload</div>
             </div>
           </a-upload>
         </a-col>
         <a-col :span="6">
           <a-form-item label="用户名称">
             <a-input :maxlength="12" :disabled="upInfoSwitch"></a-input>
           </a-form-item>
           <a-form-item label="性别">
             <a-select
                 ref="select"
                 v-model:value="valueSelect"
                 :disabled="upInfoSwitch"
             >
               <a-select-option value="man">男</a-select-option>
               <a-select-option value="nv">女</a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="生日">
             <a-date-picker v-model:value="value1" :format="dateFormat" :disabled="upInfoSwitch"/>
           </a-form-item>

         </a-col>
         <a-col :span="8">
           <a-form-item label="个人简介">
             <a-textarea :disabled="upInfoSwitch"></a-textarea>
           </a-form-item>
           <a-form-item label="地址">
             <a-textarea :disabled="upInfoSwitch"></a-textarea>
           </a-form-item>
         </a-col>
       </a-row>
       <a-flex justify="end" :gap="16">
         <a-button @click="okUpInfo">点击修改</a-button>
         <a-button @click="clearUpInfo">确认修改</a-button>
       </a-flex>
     </a-card>
   </a-flex>
    <a-row :gutter="16" style="margin: 10px 0" v-if="false">
      <a-col :span="6">
        <a-card>
          内容
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          内容
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          内容
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          内容
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped lang="scss">

</style>